<template>
  <div class="app-container">
    <el-button @click="refresh">刷新</el-button>
    <!--    <el-button @click="openAddDialog">添加菜品</el-button>-->
    <el-button @click="openFoodTypeDialog">管理菜型</el-button>
    <el-button @click="openDefaultFoodDialog">默认下单</el-button>
    <el-button @click="openFoodAttributeDialog">菜品属性</el-button>

    <!--默认下单弹窗-->
    <el-dialog
      title="默认下单"
      :visible.sync="defaultFoodDialog"
      width="560px"
      :before-close="closeDefaultFoodDialog">
      <hr>
      <div class="dialog" style="margin:0 auto;width: 500px">
        <span>默认下单：</span>
        <el-switch
          v-model="defaultFoodSwitch"
          active-color="#FF8502"
          inactive-color="#999999"
          @change="defaultFoodSwitchChange">
        </el-switch>
        <p style="width: 460px;color: #999999;padding:10px 0 10px 76px">系统根据设置的菜品，开桌后自动下单，保存才生效。 例如：默认添加纸巾。</p>
        <div v-show="defaultFoodTableDiv">
          <span>默认菜品：</span>
          <br>
          <br>
          <el-table :data="defaultFoodData">
            <el-table-column
              align="center"
              property="foodName"
              label="菜品名称">
            </el-table-column>
            <el-table-column
              align="center"
              property="guiGe"
              label="规格">
            </el-table-column>
            <el-table-column
              align="center"
              property="sellFee"
              label="售价(元)">
            </el-table-column>
            <el-table-column
              align="center"
              property="count"
              label="数量"
              width="120px">
              <template slot-scope="scope">
                <el-input-number style="width: 100px" size="mini" v-model="scope.row.count" :min="1"
                                 label="描述文字"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row,scope.$index)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <br>
          <div align="center">
            <el-button @click="openDefaultFoodAddDialog">+添加菜品</el-button>
          </div>
        </div>
        <br>
        <br>
        <div align="center">
          <el-button type="primary" @click="saveDefaultFood">保存</el-button>
          <el-button @click="closeDefaultFoodDialog">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!--默认下单添加菜品框-->
    <el-dialog
      title="添加菜品"
      :visible.sync="defaultFoodAddDialog"
      width="560px"
      :before-close="closeDefaultFoodAddDialog">
      <hr>
      <div style="width: 200px;">
        <el-input placeholder="输入菜品名称" suffix-icon="el-icon-search"></el-input>
      </div>
      <br><br>
      <div class="dialog" style="margin:0 auto;">
        <el-table :data="defaultFoodAddTableData">
          <el-table-column
            align="center"
            property="name"
            label="菜品名称">
          </el-table-column>
          <el-table-column
            align="center"
            property="guiGeIds"
            label="规格">
          </el-table-column>
          <el-table-column
            align="center"
            property="sellFee"
            label="售价(元)">
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleAdd(scope.row,scope.$index)"
                v-if="!scope.row.defaultFood">添加
              </el-button>
              <span
                size="mini"
                type="danger"
                v-if="scope.row.defaultFood">已添加
              </span>

            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <pagination
          :total-elements="totalElements"
          :change-callback="findNotDefaultFood"
          ref="page">
        </pagination>
      </div>
    </el-dialog>

    <!--管理菜型弹窗-->
    <el-dialog
      title="管理菜型"
      :visible.sync="foodTypeDialog"
      width="450px"
      :before-close="closeFoodTypeDialog">
      <hr>
      <div class="dialog" style="margin:0 auto;width: 400px">
        <div class="dialog_body">
          <div class="dialog_body_data" v-for="item in foodTypeList">
            <span class="font">{{item.name}}</span>
            <i data-v-0af267bf class="icon el-icon-delete" @click="deleteFoodType(item.value)"></i>
            <i data-v-0af267bf class="icon el-icon-edit" @click="openFoodTypeEditDialog(item.value,item.name)"></i>
          </div>
        </div>
        <div>
          <div v-show="show_dialog_handle">
            <el-input class="dialog_save_input" v-model="foodTypeName" placeholder="请输入菜品类型"></el-input>
            <el-button class="dialog_save_button" @click="saveFoodType">保存</el-button>
          </div>
          <el-button class="open_show_dialog_handle_button" @click="openFoodTypeAddDialog">+添加类型</el-button>
        </div>
      </div>
    </el-dialog>
    <!--菜品属性弹窗-->
    <el-dialog
      title="菜品属性"
      :visible.sync="foodAttributeDialog"
      width="450px"
      :before-close="closeFoodAttributeDialog">
      <hr>
      <div class="dialog" style="margin:0 auto;width: 400px">
        <el-tabs style="color: orange" :stretch=true v-model="foodAttributeId" @tab-click="changeFoodAttributeTab">
          <el-tab-pane :label="item.name" :name="item.id" :key="item.id" v-for="item in foodAttributeTabList">
          </el-tab-pane>
        </el-tabs>
        <div class="dialog_body">
          <div class="dialog_body_data" v-for="item in foodAttributeDetailList">
            <span class="font">{{item.name}}</span>
            <i data-v-0af267bf class="icon el-icon-delete" @click="deleteFoodAttribute(item.id)"></i>
            <i data-v-0af267bf class="icon el-icon-edit" @click="openEditDialogHandle(item.id,item.name)"></i>
          </div>
        </div>
        <div>
          <div v-show="show_dialog_handle">
            <el-input class="dialog_save_input" v-model="foodAttributeDetailName" placeholder="请输入内容"></el-input>
            <el-button class="dialog_save_button" @click="saveFoodAttributeDetail">保存</el-button>
          </div>
          <el-button class="open_show_dialog_handle_button" @click="openAddDialogHandle">+添加</el-button>
        </div>
      </div>
    </el-dialog>
    <br>
    <br>
    <!--方块菜显示-->
    <div class="desk_all_box">
      <el-row>
        <!--添加菜品-->
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" class="desk_square">
          <div class="desk_square_content add_desk" @click="openAddDialog">
            <p class="">
              <i></i>
              <span style="color: gray">添加菜品</span>
            </p>
          </div>
        </el-col>
        <!--菜列表-->
        <template v-for="table in tableData">
          <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" class="desk_square">
            <div class="desk_square_content" @click="foodInfoDialogOpen(table)">
              <div class="table_num">
                <span class="item_1">{{table.foodName}}</span>
                <span class="item_2" v-for="(item,index) in table.foodGuiGeList" v-if="index<1">{{item.sellFee}}元/{{item.name}}</span>
                <span class="item_3">{{table.foodTypeName}}</span>
              </div>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>


    <!--菜信息模态框-->
    <el-dialog
      :title="NowTableData.foodName"
      :visible.sync="foodInfoDialog"
      width="20%"
      show-close
      :before-close="foodInfoDialogClose">
      <!--内容-->
      <div>
        <el-form ref="form" :model="form" label-width="100px" size="mini">
          <img alt="" width="100" height="100" style="margin-left: 15px">
          <div style="margin:10px 0 10px 15px;cursor: default">
            <el-tag v-show="NowTableOnSaleIn">堂食上架中</el-tag>
            <el-tag v-show="NowTableOnSaleOut" type="success">外卖上架中</el-tag>
          </div>

          <el-form-item label="菜品类型：">
            <div>{{NowTableData.foodTypeName}}</div>
          </el-form-item>
          <el-form-item label="菜品规格：">
            <template v-if="NowTableData.foodGuiGeList!=undefined && NowTableData.foodGuiGeList.length>0">
              <div v-for="(item,index) in NowTableData.foodGuiGeList" :key="index">
                <span>￥{{item.sellFee}}/{{item.name}}</span>
              </div>
            </template>
            <template v-else>
              <div>
                <span>暂无</span>
              </div>
            </template>
          </el-form-item>

          <el-form-item label="堂食：">
            <div>
              <span :class="{lightyFont:NowTableOnSaleIn==false}">否</span>
              <el-switch
                v-model="NowTableOnSaleIn"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span :class="{lightyFont:NowTableOnSaleIn}">是</span>

            </div>
          </el-form-item>
          <el-form-item label="外卖：">
            <div>
              <span :class="{lightyFont:NowTableOnSaleOut==false}">否</span>
              <el-switch
                v-model="NowTableOnSaleOut"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
              <span :class="{lightyFont:NowTableOnSaleOut}">是</span>

            </div>
          </el-form-item>
        </el-form>

        <div style="text-align: center;margin-top: 20px">
          <el-button type="primary" @click="openEditDialog">编辑</el-button>
          <el-button>删除</el-button>
        </div>
      </div>
    </el-dialog>
    <!--表格数据-->
    <!--    <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            label="菜品名称">
          </el-table-column>
          <el-table-column
            prop="foodType.name"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="sellFee"
            label="价格">
          </el-table-column>
          <el-table-column
            prop="inventory"
            label="库存">
          </el-table-column>
          <el-table-column
            label="操作"
            align="left" max-width="30">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="openEditDialog(scope.row)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>-->
    <!--分页-->
    <pagination
      :total-elements="totalElements"
      :change-callback="getTableList"
      ref="page">
    </pagination>


    <!--模态框-->


    <!--添加菜品-->
    <el-dialog title="添加菜品" :visible.sync="addDialog">
      <el-form :model="form">
        <el-form-item v-if="form.category=='1' ||form.category=='2' || form.category=='3' " label="菜品类型"
                      :label-width="formLabelWidth">
          <el-select
            v-model="form.foodTypeId"
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in foodTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--打印区域-->
        <el-form-item label="打印区域" :label-width="formLabelWidth">
          <el-select
            v-model="form.printArea"
            collapse-tags
            placeholder="选择打印区域">
            <el-option
              v-for="item in printArea"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--v-if 不同类型 显示表单不同-->
        <el-form-item label="菜品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="规格" :label-width="formLabelWidth">-->
        <!--<el-input v-model="form.guiGeIds" autocomplete="off"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="餐盒费" :label-width="formLabelWidth">
          <el-input v-model="form.boxFee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存" :label-width="formLabelWidth">
          <el-input v-model="form.inventory" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别" :label-width="formLabelWidth">
          <el-radio v-model="form.category" @click="changeCategory(1)" label="1">无</el-radio>
          <el-radio v-model="form.category" @click="changeCategory(2)" label="2">辅菜</el-radio>
          <el-radio v-model="form.category" @click="changeCategory(3)" label="3">主菜</el-radio>
        </el-form-item>
        <el-form-item label="菜品上架" :label-width="formLabelWidth">
          <el-checkbox-group v-model="form.onSale">
            <el-checkbox label="1">堂食上架</el-checkbox>
            <el-checkbox label="2" :disabled="form.category!='1'">外卖上架</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="做法" :label-width="formLabelWidth"
                      v-if="form.category=='1' || form.category=='3' ">
          <el-select
            v-model="form.zuofas"
            multiple
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in zuofaOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="口味" :label-width="formLabelWidth"
                      v-if="form.category=='1' || form.category=='3' ">
          <el-select
            v-model="form.kouweis"
            multiple
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in kouweiOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="称重" :label-width="formLabelWidth"
                      v-if="form.category=='1' || form.category=='3' ">
          <!--<el-select-->
          <!--v-model="form.chengzhongs"-->
          <!--multiple-->
          <!--collapse-tags-->
          <!--placeholder="请选择">-->
          <!--<el-option-->
          <!--v-for="item in chengzhongOptions"-->
          <!--:key="item.value"-->
          <!--:label="item.name"-->
          <!--:value="item.value">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <el-radio v-model="form.chengzhongType" label="0">无</el-radio>
          <el-radio v-model="form.chengzhongType" label="1">有</el-radio>
        </el-form-item>


        <!--称重模式-->
        <el-form-item v-show="form.chengzhongType==1" :label-width="formLabelWidth">
          <!--价格-->
          <div v-for="(item,index) in form.chengzhongMulti" :key="index"
               style="vertical-align: middle;margin-bottom: 5px">
            <el-select
              v-model="item.name"
              collapse-tags
              placeholder="请选择称量单位"
              :disabled="item.save"
              @change="getchengzhongMultiId($event)">
              <el-option
                v-for="item in chengzhongOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" v-show="!item.save" style="margin-left: 10px" @click="savechengzhongUnit(index)">
              保存
            </el-button>
            <i class="el-icon-delete deleteicon" v-show="item.save" style="font-size: 20px;margin-left: 20px;"
               @click="deletechengzhongUnit(index)"></i>
          </div>

          <el-button type="primary" plain style="margin-top: 10px" @click="addchengzhongUnit">添加</el-button>
        </el-form-item>
        <el-form-item label="菜品图片" :label-width="formLabelWidth">
          <el-upload
            class="logo-uploader"
            :action="url"
            :data="filesData"
            name="files"
            :show-file-list="false"
            :on-success="createLogoSuccess"
            :on-error="handleLogoFailed"
            :before-upload="beforeLogoUpload"
            :headers="headers">
            <img v-if="createdSrc" :src="createdSrc" class="logo">
            <i v-else class="el-icon-plus logo-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!--销售价格-->
        <el-form-item label="销售价格" :label-width="formLabelWidth">
          <el-radio v-model="form.sellMoneyType" label="0">单一售价</el-radio>
          <el-radio v-model="form.sellMoneyType" :disabled="form.chengzhongType==1" label="1">多规格售价</el-radio>
        </el-form-item>
        <!--单规格模式-->
        <el-form-item v-show="form.sellMoneyType==0" :label-width="formLabelWidth">
          <!--价格-->
          <el-input placeholder="输入销售价格" type="number" v-model="form.sellMoneySinglePrice" style="width: 200px">
            <template slot="append">元</template>
          </el-input>
          <!--单位-->
          <el-select v-model="form.sellMoneySingleUnit" placeholder="请选择菜品规格" style="width: 200px"
                     @change="getSellMoneySingle($event)">
            <el-option
              v-for="item in unitOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--多规格模式-->
        <el-form-item v-show="form.sellMoneyType==1" :label-width="formLabelWidth">
          <!--价格-->
          <div v-for="(item,index) in form.sellMoneyMultiPrice" :key="index" style="vertical-align: middle">
            <!--<el-input placeholder="输入规格" type="text" v-model="item.name" style="width: 150px;margin-bottom: 2px"-->
            <!--:disabled="item.save">-->
            <!--</el-input>-->
            <!--单位-->
            <el-select v-model="item.name" placeholder="请选择菜品单位" style="width: 200px"
                       @change="getSellMoneyMulti($event)" :disabled="item.save">
              <el-option
                v-for="item in guigeOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input placeholder="输入价格" type="number" v-model="item.price"
                      style="width: 200px;margin-bottom: 3px">
              <template slot="append">元</template>
            </el-input>
            <el-button type="primary" v-show="!item.save" style="margin-left: 10px" @click="saveSellModeUnit(index)">
              保存
            </el-button>
            <i class="el-icon-delete deleteicon" v-show="item.save" style="font-size: 20px;margin-left: 20px;"
               @click="deleteSellModeUnit(index)"></i>
          </div>
          <el-button type="primary" plain style="margin-top: 10px" @click="addSellModeUnit">添加</el-button>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addFood">确 定</el-button>
      </div>
    </el-dialog>


    <!--编辑菜品-->
    <!--<el-dialog title="编辑菜品" :visible.sync="editDialog">-->
    <!--<el-form :model="editForm">-->
    <!--<el-form-item v-if="editForm.category=='1' ||editForm.category=='2' || editForm.category=='3' " label="菜品类型"-->
    <!--:label-width="formLabelWidth">-->
    <!--<el-select-->
    <!--v-model="editForm.foodTypeId"-->
    <!--collapse-tags-->
    <!--placeholder="请选择">-->
    <!--<el-option-->
    <!--v-for="item in foodTypeList"-->
    <!--:key="item.value"-->
    <!--:label="item.name"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--&lt;!&ndash;打印区域&ndash;&gt;-->
    <!--<el-form-item label="打印区域" :label-width="formLabelWidth">-->
    <!--<el-select-->
    <!--v-model="editForm.areaId"-->
    <!--collapse-tags-->
    <!--placeholder="选择打印区域">-->
    <!--<el-option-->
    <!--v-for="item in printArea"-->
    <!--:key="item.value"-->
    <!--:label="item.name"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--&lt;!&ndash;v-if 不同类型 显示表单不同&ndash;&gt;-->
    <!--<el-form-item label="菜品名称" :label-width="formLabelWidth">-->
    <!--<el-input v-model="editForm.name" autocomplete="off"></el-input>-->
    <!--</el-form-item>-->
    <!--&lt;!&ndash;<el-form-item label="规格" :label-width="formLabelWidth">&ndash;&gt;-->
    <!--&lt;!&ndash;<el-input v-model="form.guiGeIds" autocomplete="off"></el-input>&ndash;&gt;-->
    <!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
    <!--<el-form-item label="餐盒费" :label-width="formLabelWidth">-->
    <!--<el-input v-model="editForm.boxFee" autocomplete="off"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="库存" :label-width="formLabelWidth">-->
    <!--<el-input v-model="editForm.inventory" autocomplete="off"></el-input>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="类别" :label-width="formLabelWidth">-->
    <!--<el-radio v-model="editForm.category" @click="changeCategoryE(1)" label="1">无</el-radio>-->
    <!--<el-radio v-model="editForm.category" @click="changeCategoryE(2)" label="2">辅菜</el-radio>-->
    <!--<el-radio v-model="editForm.category" @click="changeCategoryE(3)" label="3">主菜</el-radio>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="菜品上架" :label-width="formLabelWidth">-->
    <!--<el-checkbox-group v-model="editForm.onSale">-->
    <!--<el-checkbox label="1">堂食上架</el-checkbox>-->
    <!--<el-checkbox label="2" :disabled="editForm.category!='1'">外卖上架</el-checkbox>-->
    <!--</el-checkbox-group>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="做法" :label-width="formLabelWidth"-->
    <!--v-if="editForm.category=='1' || editForm.category=='3' ">-->
    <!--<el-select-->
    <!--v-model="editForm.zuoFaIds"-->
    <!--multiple-->
    <!--collapse-tags-->
    <!--placeholder="请选择">-->
    <!--<el-option-->
    <!--v-for="item in zuofaOptions"-->
    <!--:key="item.value"-->
    <!--:label="item.name"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="口味" :label-width="formLabelWidth"-->
    <!--v-if="editForm.category=='1' || editForm.category=='3' ">-->
    <!--<el-select-->
    <!--v-model="editForm.kouWeiIds"-->
    <!--multiple-->
    <!--collapse-tags-->
    <!--placeholder="请选择">-->
    <!--<el-option-->
    <!--v-for="item in kouweiOptions"-->
    <!--:key="item.value"-->
    <!--:label="item.name"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="称重" :label-width="formLabelWidth"-->
    <!--v-if="editForm.category=='1' || editForm.category=='3' ">-->
    <!--<el-radio v-model="editForm.chengzhongType" label="0">无</el-radio>-->
    <!--<el-radio v-model="editForm.chengzhongType" label="1">有</el-radio>-->
    <!--</el-form-item>-->


    <!--&lt;!&ndash;称重模式&ndash;&gt;-->
    <!--<el-form-item v-show="editForm.chengzhongType==1" :label-width="formLabelWidth">-->
    <!--&lt;!&ndash;价格&ndash;&gt;-->
    <!--<div v-for="(item,index) in editForm.chengzhongMulti" :key="index"-->
    <!--style="vertical-align: middle;margin-bottom: 5px">-->
    <!--<el-select-->
    <!--v-model="item.value"-->
    <!--collapse-tags-->
    <!--placeholder="请选择称量单位"-->
    <!--:disabled="item.save"-->
    <!--@change="getchengzhongMultiIdE($event)">-->
    <!--<el-option-->
    <!--v-for="item in chengzhongOptions"-->
    <!--:key="item.value"-->
    <!--:label="item.name"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--<el-button type="primary" v-show="!item.save" style="margin-left: 10px" @click="savechengzhongUnitE(index)">-->
    <!--保存-->
    <!--</el-button>-->
    <!--<i class="el-icon-delete deleteicon" v-show="item.save" style="font-size: 20px;margin-left: 20px;"-->
    <!--@click="deletechengzhongUnitE(index)"></i>-->
    <!--</div>-->

    <!--<el-button type="primary" plain style="margin-top: 10px" @click="addchengzhongUnitE">添加</el-button>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="菜品图片" :label-width="formLabelWidth">-->
    <!--<el-upload-->
    <!--class="logo-uploader"-->
    <!--:action="url"-->
    <!--:data="filesData"-->
    <!--name="files"-->
    <!--:show-file-list="false"-->
    <!--:on-success="createLogoSuccess"-->
    <!--:on-error="handleLogoFailed"-->
    <!--:before-upload="beforeLogoUpload"-->
    <!--:headers="headers">-->
    <!--<img v-if="createdSrc" :src="createdSrc" class="logo">-->
    <!--<i v-else class="el-icon-plus logo-uploader-icon"></i>-->
    <!--</el-upload>-->
    <!--</el-form-item>-->
    <!--&lt;!&ndash;销售价格&ndash;&gt;-->
    <!--<el-form-item label="销售价格" :label-width="formLabelWidth">-->
    <!--<el-radio v-model="editForm.sellMoneyType" label="0">单一售价</el-radio>-->
    <!--<el-radio v-model="editForm.sellMoneyType" :disabled="editForm.chengzhongType==1" label="1">多规格售价</el-radio>-->
    <!--</el-form-item>-->
    <!--&lt;!&ndash;单规格模式&ndash;&gt;-->
    <!--<el-form-item v-show="editForm.sellMoneyType==0" :label-width="formLabelWidth">-->
    <!--&lt;!&ndash;价格&ndash;&gt;-->
    <!--<el-input placeholder="输入销售价格" type="number" v-model="editForm.sellMoneySinglePrice" style="width: 200px">-->
    <!--<template slot="append">元</template>-->
    <!--</el-input>-->
    <!--&lt;!&ndash;单位&ndash;&gt;-->
    <!--<el-select v-model="editForm.sellMoneySingleUnitId" placeholder="请选择菜品规格" style="width: 200px"-->
    <!--@change="getSellMoneySingleE($event)">-->
    <!--<el-option-->
    <!--v-for="item in guigeOptions"-->
    <!--:key="item.value"-->
    <!--:label="item.name"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--&lt;!&ndash;多规格模式&ndash;&gt;-->
    <!--<el-form-item v-show="editForm.sellMoneyType==1" :label-width="formLabelWidth">-->
    <!--&lt;!&ndash;价格&ndash;&gt;-->
    <!--<div v-for="(item,index) in editForm.sellMoneyMultiPrice" :key="index" style="vertical-align: middle">-->
    <!--<el-select v-model="item.value" placeholder="请选择菜品规格" style="width: 200px"-->
    <!--@change="getSellMoneyMultiE($event)" :disabled="item.save">-->
    <!--<el-option-->
    <!--v-for="item in guigeOptions"-->
    <!--:key="item.value"-->
    <!--:label="item.name"-->
    <!--:value="item.value"-->
    <!--&gt;-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--<el-input placeholder="输入价格" type="number" v-model="item.price"-->
    <!--style="width: 200px;margin-bottom: 3px">-->
    <!--<template slot="append">元</template>-->
    <!--</el-input>-->
    <!--<el-button type="primary" v-show="!item.save" style="margin-left: 10px" @click="saveSellModeUnitE(index)">-->
    <!--保存-->
    <!--</el-button>-->
    <!--<i class="el-icon-delete deleteicon" v-show="item.save" style="font-size: 20px;margin-left: 20px;"-->
    <!--@click="deleteSellModeUnitE(index)"></i>-->
    <!--</div>-->
    <!--<el-button type="primary" plain style="margin-top: 10px" @click="addSellModeUnitE">添加</el-button>-->
    <!--</el-form-item>-->


    <!--</el-form>-->
    <!--<div slot="footer" class="dialog-footer">-->
    <!--<el-button @click="editDialog = false">取 消</el-button>-->
    <!--<el-button type="primary" @click="editFood">确 定</el-button>-->
    <!--</div>-->
    <!--</el-dialog>-->

    <!--添加菜品-->
    <el-dialog title="添加菜品" :visible.sync="editDialog">
      <el-form :model="form">
        <el-form-item v-if="form.category=='1' ||form.category=='2' || form.category=='3' " label="菜品类型"
                      :label-width="formLabelWidth">
          <el-select
            v-model="form.foodTypeId"
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in foodTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--打印区域-->
        <el-form-item label="打印区域" :label-width="formLabelWidth">
          <el-select
            v-model="form.printArea"
            collapse-tags
            placeholder="选择打印区域">
            <el-option
              v-for="item in printArea"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--v-if 不同类型 显示表单不同-->
        <el-form-item label="菜品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="规格" :label-width="formLabelWidth">-->
        <!--<el-input v-model="form.guiGeIds" autocomplete="off"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="餐盒费" :label-width="formLabelWidth">
          <el-input v-model="form.boxFee" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存" :label-width="formLabelWidth">
          <el-input v-model="form.inventory" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别" :label-width="formLabelWidth">
          <el-radio v-model="form.category" @click="changeCategory(1)" label="1">无</el-radio>
          <el-radio v-model="form.category" @click="changeCategory(2)" label="2">辅菜</el-radio>
          <el-radio v-model="form.category" @click="changeCategory(3)" label="3">主菜</el-radio>
        </el-form-item>
        <el-form-item label="菜品上架" :label-width="formLabelWidth">
          <el-checkbox-group v-model="form.onSale">
            <el-checkbox label="1">堂食上架</el-checkbox>
            <el-checkbox label="2" :disabled="form.category!='1'">外卖上架</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="做法" :label-width="formLabelWidth"
                      v-if="form.category=='1' || form.category=='3' ">
          <el-select
            v-model="form.zuofas"
            multiple
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in zuofaOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="口味" :label-width="formLabelWidth"
                      v-if="form.category=='1' || form.category=='3' ">
          <el-select
            v-model="form.kouweis"
            multiple
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in kouweiOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="称重" :label-width="formLabelWidth"
                      v-if="form.category=='1' || form.category=='3' ">
          <!--<el-select-->
          <!--v-model="form.chengzhongs"-->
          <!--multiple-->
          <!--collapse-tags-->
          <!--placeholder="请选择">-->
          <!--<el-option-->
          <!--v-for="item in chengzhongOptions"-->
          <!--:key="item.value"-->
          <!--:label="item.name"-->
          <!--:value="item.value">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <el-radio v-model="form.chengzhongType" label="0">无</el-radio>
          <el-radio v-model="form.chengzhongType" label="1">有</el-radio>
        </el-form-item>


        <!--称重模式-->
        <el-form-item v-show="form.chengzhongType==1" :label-width="formLabelWidth">
          <!--价格-->
          <div v-for="(item,index) in form.chengzhongMulti" :key="index"
               style="vertical-align: middle;margin-bottom: 5px">
            <el-select
              v-model="item.value"
              collapse-tags
              placeholder="请选择称量单位"
              :disabled="item.save"
              @change="getchengzhongMultiId($event)">
              <el-option
                v-for="item in chengzhongOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" v-show="!item.save" style="margin-left: 10px" @click="savechengzhongUnit(index)">
              保存
            </el-button>
            <i class="el-icon-delete deleteicon" v-show="item.save" style="font-size: 20px;margin-left: 20px;"
               @click="deletechengzhongUnit(index)"></i>
          </div>

          <el-button type="primary" plain style="margin-top: 10px" @click="addchengzhongUnit">添加</el-button>
        </el-form-item>
        <el-form-item label="菜品图片" :label-width="formLabelWidth">
          <el-upload
            class="logo-uploader"
            :action="url"
            :data="filesData"
            name="files"
            :show-file-list="false"
            :on-success="createLogoSuccess"
            :on-error="handleLogoFailed"
            :before-upload="beforeLogoUpload"
            :headers="headers">
            <img v-if="createdSrc" :src="createdSrc" class="logo">
            <i v-else class="el-icon-plus logo-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!--销售价格-->
        <el-form-item label="销售价格" :label-width="formLabelWidth">
          <el-radio v-model="form.sellMoneyType" label="0">单一售价</el-radio>
          <el-radio v-model="form.sellMoneyType" :disabled="form.chengzhongType==1" label="1">多规格售价</el-radio>
        </el-form-item>
        <!--单规格模式-->
        <el-form-item v-show="form.sellMoneyType=='0'" :label-width="formLabelWidth">
          <!--价格-->
          <el-input placeholder="输入销售价格" type="number" v-model="form.sellMoneySinglePrice" style="width: 200px">
            <template slot="append">元</template>
          </el-input>
          <!--单位-->
          <el-select v-model="form.sellMoneySingleUnit" placeholder="请选择菜品单位" style="width: 200px"
                     @change="getSellMoneySingle($event)">
            <el-option
              v-for="item in unitOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--多规格模式-->
        <el-form-item v-show="form.sellMoneyType=='1'" :label-width="formLabelWidth">
          <!--价格-->
          <div v-for="(item,index) in form.sellMoneyMultiPrice" :key="index" style="vertical-align: middle">
            <!--<el-input placeholder="输入规格" type="text" v-model="item.name" style="width: 150px;margin-bottom: 2px"-->
            <!--:disabled="item.save">-->
            <!--</el-input>-->
            <!--单位-->
            <el-select v-model="item.value" placeholder="请选择菜品规格" style="width: 200px"
                       @change="getSellMoneyMulti($event)" :disabled="item.save">
              <el-option
                v-for="item in guigeOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input placeholder="输入价格" type="number" v-model="item.price"
                      style="width: 200px;margin-bottom: 3px">
              <template slot="append">元</template>
            </el-input>
            <el-button type="primary" v-show="!item.save" style="margin-left: 10px" @click="saveSellModeUnit(index)">
              保存
            </el-button>
            <i class="el-icon-delete deleteicon" v-show="item.save" style="font-size: 20px;margin-left: 20px;"
               @click="deleteSellModeUnit(index)"></i>
          </div>
          <el-button type="primary" plain style="margin-top: 10px" @click="addSellModeUnit">添加</el-button>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editFood">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    findFoodAttribute,
    addFoodAttribute,
    editFoodAttribute,
    deleteFoodAttribute,
    findStoreFoodAttribute
  } from '@/modules/food/api/food_attribute_detail'
  import {findFoodType, addFoodType, editFoodType, deleteFoodType} from '@/modules/food/api/food_type'
  import {
    getTableList,
    addFood,
    editFood,
    deleteFood,
    findNotDefaultFood,
    getPrintArea,
    getFoodData
  } from '@/modules/food/api/food'
  import {getDefaultFoodList, addDefaultFood} from '@/modules/food/api/default_food'
  import pagination from '@/components/pagination/index'
  import {returnThumbnailUrl, uploadUrl} from '@/modules/file/api/upload'
  import Vue from 'vue'

  export default {
    name: 'index',
    data() {
      return {
        checkList: [],
        // 管理菜型
        foodTypeId: '',
        foodTypeDialog: false,
        foodTypeName: '',
        foodTypeList: [],
        // 默认下单
        defaultFoodDialog: false,
        defaultFoodSwitch: true,
        defaultFoodData: [],
        defaultFoodAddTableData: [],
        defaultFoodTableDiv: true,
        dialogTableVisible: false,
        defaultFoodAddDialog: false,
        // 菜品属性
        foodAttributeId: '120725207030697984',
        foodAttributeDetailId: '',
        batch_operation: false,
        foodAttributeDialog: false,
        show_dialog_handle: false,
        foodAttributeTabList: [], // 菜品属性tab
        foodAttributeDetailList: [], // 菜品属性详情
        foodAttributeDetailName: '',
        // 菜品表格
        formLabelWidth: '120px',//设置宽度
        tableData: [],
        NowTableData: {},
        NowTableOnSaleIn: [],
        NowTableOnSaleOut: [],
        NowTableDataGuige: {},
        totalElements: 0,
        loading: false,
        addDialog: false,
        editDialog: false,
        form: {
          id: '',
          storeId: '',
          foodTypeId: '',
          foodTypeName: '',
          name: '',
          onSale: [],
          sellFee: '',
          guiGeIds: '',
          boxFee: '',
          inventory: '',
          category: '1',
          zuofas: '',
          kouweis: '',
          guiges: '',
          chengzhongs: '',
          chengzhongsUnit: '',
          chengzhongType: "0",
          chengzhongMultiId: '',
          chengzhongMulti: [
            {name: '', value: '', save: false}
          ],
          units: '',
          sellMoneyType: "0",
          sellMoneySinglePrice: 0,
          sellMoneySingleUnit: '',
          sellMoneySingleUnitId: '',
          sellMoneyMultiUnitId: '',
          sellMoneyMultiPrice: [
            {name: '', value: '', price: '', save: false}
          ],
          printArea: ''
        },
        editForm: {
          sellMoneyMultiPrice: [
            {name: '', value: '', price: '', save: false}
          ]
        },//编辑表单
        sellMoneyMulti_disabled: false,//关闭多规格模式
        sellModeSaveStatus: 0,//多规格保存状态
        chengzhongSaveStatus: 0,//称重保存状态
        sellModeSaveStatusE: 0,//多规格保存状态--编辑模式
        chengzhongSaveStatusE: 0,//称重保存状态--编辑模式

        photoId: '',//上传图片ID


        foodTypeSelect: [], // 菜品类型下拉框
        zuofaOptions: [], //做法下拉框
        kouweiOptions: [], //口味下拉框
        guigeOptions: [], //规格下拉框
        chengzhongOptions: [], //称重下拉框
        unitOptions: [
        ], //菜品单位下拉框
        filesData: {
          module: 'food'
        },
        url: uploadUrl + "/food",
        createdSrc: '',
        editSrc: '',
        headers: {
          authorized: sessionStorage.token
        },
        printArea: {},//打印机区域
        foodInfoDialog: false //菜信息模态框
      }
    },
    components: {pagination},
    created() {
      this.getTableList()
    },
    watch: {
      //监听规格选项
      // 'form.sellMoneyType': {
      //   deep: true,
      //   handler: function () {
      //     console.log(this.form.sellMoney);
      //     let e = this.form.sellMoney
      //     if (e == 0) {
      //       this.sellMoneyType = 0;
      //     }
      //     if (e == 1) {
      //       this.sellMoneyType = 1;
      //     }
      //   }
      // },
      'form.chengzhongType': {
        handler: function () {
          if (this.form.chengzhongType == 1) {
            this.form.sellMoneyType = "0"
          }
        }
      }
    },
    methods: {
      // ======================默认下单操作=================
      // 打开默认下单框
      openDefaultFoodDialog() {
        // 获取默认下单的菜品列表
        getDefaultFoodList().then(response => {
          let data = response.obj
          this.defaultFoodData = data
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
        this.findNotDefaultFood()
        this.defaultFoodDialog = true
      },
      //
      findNotDefaultFood(number, pageSize) {
        // 获取可以添加的菜品列表
        findNotDefaultFood(number, pageSize).then(response => {
          let data = response.obj.content
          this.defaultFoodAddTableData = data
          for (let i = 0; i < this.defaultFoodAddTableData.length; i++) {
            this.defaultFoodAddTableData[i].defaultFood = false // 前端未添加到默认下单菜品
          }
          this.totalElements = response.obj.totalElements
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      // 关闭默认下单框
      closeDefaultFoodDialog() {
        this.defaultFoodDialog = false
      },
      // 默认下单开关
      defaultFoodSwitchChange() {
        if (this.defaultFoodSwitch) {
          this.defaultFoodTableDiv = true
        } else {
          this.defaultFoodTableDiv = false
        }
      },
      // 打开默认下单添加菜品框
      openDefaultFoodAddDialog() {
        this.defaultFoodAddDialog = true

      },
      // 关闭默认下单添加菜品框
      closeDefaultFoodAddDialog() {
        this.defaultFoodAddDialog = false
      },
      // 删除默认菜品
      handleDelete(row, index) {
        row.defaultFood = true
        this.defaultFoodData.splice(index, 1)
      },
      // 添加菜品到默认下单表
      handleAdd(row, index) {
        // this.$set(row,"defaultFood",true)
        row.defaultFood = true
        Vue.set(this.defaultFoodAddTableData, index, row)
        let defaultFood = {}
        defaultFood.foodId = row.id
        defaultFood.foodName = row.name
        defaultFood.count = 1
        defaultFood.guiGe = row.guiGeIds
        defaultFood.sellFee = row.sellFee
        this.defaultFoodData.push(defaultFood)
        // console.log("defaultFoodAddTableData",this.defaultFoodAddTableData)
      },
      // 保存默认下单菜品
      saveDefaultFood() {
        let foodIds = []
        let counts = []
        let obj = {}
        let foodAndCounts = []
        for (let i = 0; i < this.defaultFoodData.length; i++) {
          // foodIds.push(this.defaultFoodData[i].foodId)
          // counts.push(this.defaultFoodData[i].count)
          obj.foodId = this.defaultFoodData[i].foodId
          obj.count = this.defaultFoodData[i].count
          foodAndCounts.push(obj)
        }
        console.log("foodAndCounts", foodAndCounts)
        // return
        addDefaultFood(JSON.stringify(foodAndCounts)).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          })
          this.defaultFoodDialog = false
        }).catch(() => {
          this.loading = false
        })
      },
      //打印区域列表
      getTablePrintArea: function () {
        getPrintArea().then(res => {
          this.printArea = res.obj
        }).catch(e => {

        })
      },

      // ======================菜品表格操作=================
      //表格列表
      getTableList: function (number, pageSize) {
        this.loading = true
        getTableList(number, pageSize).then(response => {
          let data = response.obj.content
          this.tableData = data
          console.log(this.tableData)
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].operator = true // 额外加上一个operator属性，可作为添加到默认菜单标志
          }
          this.totalElements = response.obj.totalElements
          this.loading = false
        }).catch(() => {
          this.loading = false
        })

      },
      openAddDialog() {
        // 菜品类型下拉框
        this.findFoodType(),
          // 菜品属性下拉框
          this.findStoreFoodAttribute(),
          this.getTablePrintArea(),
          this.form.foodTypeId = '',
          this.form.foodTypeName = '',
          this.form.name = '',
          this.form.sellFee = '',
          this.form.guiGeIds = '',
          this.form.boxFee = '',
          this.form.inventory = '',
          this.form.category = '1',
          this.addDialog = true
      },

      //点击切换销售价格,触发事件
      // clickitem(e) {
      //   if (e == 1) {
      //     this.sellPriceMode = 0;
      //     this.form.sellMoney = "1";
      //   }
      //   if (e == 2) {
      //     this.sellPriceMode = 1;
      //     this.form.sellMoney = "2";
      //   }
      // },

      //添加菜品
      addFood() {
        /**
         *   获取菜品各个属性
         **/
          // 获取称重
        let tempForm = {};
        let chengzhongItemArr = [];
        if (this.form.chengzhongType == "1") {
          for (let i = 0; i < this.form.chengzhongMulti.length; i++) {
            if (this.form.chengzhongMulti[i].value != '') {
              chengzhongItemArr.push(this.form.chengzhongMulti[i].value)
            }
          }
        }
        //判断称重是否有值
        if (this.form.chengzhongType == "1") {
          tempForm.chengZhongIds = chengzhongItemArr.join('-');
        } else {
          tempForm.chengZhongIds = "";
        }
        //获规格列表
        var sellMoneyMultiItemArr = [];
        if (this.form.sellMoneyType == "1") {
          for (var i = 0; i < this.form.sellMoneyMultiPrice.length; i++) {
            let tmp = {}
            if (this.form.sellMoneyMultiPrice[i].value != "") {
              tmp.sellFee = this.form.sellMoneyMultiPrice[i].price;
              tmp.foodAttributeDetailId = this.form.sellMoneyMultiPrice[i].value;
              sellMoneyMultiItemArr.push(tmp)
            }
          }
        }
        //判断是否规格
        if (this.form.sellMoneyType == "1") {
          tempForm.foodGuiges = JSON.stringify(sellMoneyMultiItemArr);
        } else {
          tempForm.foodGuiges = JSON.stringify([{
            sellFee: this.form.sellMoneySinglePrice,
            foodAttributeDetailId: this.form.sellMoneySingleUnitId
          }])
        }
        //转移数据
        tempForm.storeId = sessionStorage.getItem('storeId');
        tempForm.name = this.form.name;
        tempForm.foodTypeId = this.form.foodTypeId;
        tempForm.photoId = this.photoId;
        tempForm.areaId = this.form.printArea;
        tempForm.boxFee = this.form.boxFee;
        tempForm.inventory = this.form.inventory;
        tempForm.category = this.form.category;
        tempForm.onSale = this.form.onSale.join('-');
        tempForm.kouWeiIds = this.form.kouweis.join('-');
        tempForm.zuoFaIds = this.form.zuofas.join('-');
        //检查数据
        console.log(this.form)
        console.log(tempForm)
        addFood(tempForm).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          })
          //this.cleanForm() //清除
          this.addDialog = false
          this.$refs.page.refresh()
        }).catch(() => {
          this.loading = false
        })
      },
      //清除表单
      cleanForm() {
        this.form = {
          id: '',
          storeId: '',
          foodTypeId: '',
          foodTypeName: '',
          name: '',
          onSale: [],
          sellFee: '',
          guiGeIds: '',
          boxFee: '',
          inventory: '',
          category: '1',
          zuofas: '',
          kouweis: '',
          guiges: '',
          chengzhongs: '',
          chengzhongsUnit: '',
          chengzhongType: "0",
          chengzhongMultiId: '',
          chengzhongMulti: [
            {name: '', value: '', save: false}
          ],
          units: '',
          sellMoneyType: "0",
          sellMoneySinglePrice: 0,
          sellMoneySingleUnit: '',
          sellMoneySingleUnitId: '',
          sellMoneyMultiUnitId: '',
          sellMoneyMultiPrice: [
            {name: '', value: '', price: '', save: false}
          ],
          printArea: ''
        }
      },
      /**
       * 打开编辑模态框
       */
      openEditDialog(row) {
        //获取ID
        this.sellModeSaveStatusE = 1
        this.chengzhongSaveStatusE = 1
        console.log(this.NowTableData)
        let foodid = this.NowTableData.foodId
        // 获取下拉框
        this.findFoodType()
        this.getTablePrintArea();
        this.findStoreFoodAttribute();
        //接收基础数据
        getFoodData(foodid).then(res => {
          let data = res.obj
          console.log(data)

          this.form.category = data.category + "";
          this.form.id = data.id;
          this.form.foodTypeId = data.foodTypeId;
          //上架类型

          let onSale = data.onSale.split('-');
          let onSaleArr = onSale.filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
          });
          this.form.onSale = onSaleArr

          this.form.zuofas = data.zuoFaIds.split('-')
          this.form.kouweis = data.kouWeiIds.split('-')
          this.form.name = data.name
          this.form.boxFee = data.boxFee
          this.form.inventory = data.inventory
          this.form.printArea = data.areaId
          this.photoId = data.photoId

          if (data.chengZhongIds == "") {
            this.form.chengzhongType = "0"
          } else {
            this.form.chengzhongType = "1"
            let tmpArr = [];
            let czArr = data.chengZhongIds.split("-")
            for (let i in czArr) {
              let a = {}
              a.value = czArr[i];
              a.save = true
              tmpArr.push(a)
            }
            this.form.chengzhongMulti = tmpArr
          }
          if (this.NowTableDataGuige.length < 1 || this.NowTableDataGuige.length == undefined) {
            this.form.sellMoneyType = "0"
          } else if (this.NowTableDataGuige.length === 1) {
            this.form.sellMoneyType = "0"
            this.form.sellMoneySingleUnit = this.NowTableDataGuige[0].foodAttributeDetailId
            this.form.sellMoneySinglePrice = this.NowTableDataGuige[0].sellFee
          } else {
            this.form.sellMoneyType = "1"
            this.form.sellMoneyMultiUnitId = '';
            let tmpArr = []
            for (let i in this.NowTableDataGuige) {
              let a = {}
              a.value = this.NowTableDataGuige[i].foodAttributeDetailId;
              a.price = this.NowTableDataGuige[i].sellFee;
              a.save = true;
              tmpArr.push(a)
            }
            this.form.sellMoneyMultiPrice = tmpArr;
            this.sellModeSaveStatus = 1
          }
          this.createdSrc = this.getPicUrl(data.photoId)

        }).catch(e => {

        })
        // this.form.foodTypeId = row.foodTypeId
        // this.form.name = row.name
        // this.form.sellFee = row.sellFee
        // this.form.boxFee = row.boxFee
        // this.form.inventory = row.inventory
        // this.form.category = row.category + ''

        this.editDialog = true
      },
      getPicUrl(picid) {
        console.log(returnThumbnailUrl(picid))
        return returnThumbnailUrl(picid)
      },
      // 修改菜品
      editFood() {
        let tempForm = {};
        let chengzhongItemArr = [];
        if (this.form.chengzhongType == "1") {
          for (let i = 0; i < this.form.chengzhongMulti.length; i++) {
            if (this.form.chengzhongMulti[i].value != '') {
              chengzhongItemArr.push(this.form.chengzhongMulti[i].value)
            }
          }
        }
        //判断称重是否有值
        if (this.form.chengzhongType == "1") {
          tempForm.chengZhongIds = chengzhongItemArr.join('-');
        } else {
          tempForm.chengZhongIds = "";
        }
        //获规格列表
        var sellMoneyMultiItemArr = [];
        if (this.form.sellMoneyType == "1") {
          for (var i = 0; i < this.form.sellMoneyMultiPrice.length; i++) {
            let tmp = {}
            if (this.form.sellMoneyMultiPrice[i].value != "") {
              tmp.sellFee = this.form.sellMoneyMultiPrice[i].price;
              tmp.foodAttributeDetailId = this.form.sellMoneyMultiPrice[i].value;
              sellMoneyMultiItemArr.push(tmp)
            }
          }
        }
        //判断是否规格
        if (this.form.sellMoneyType == "1") {
          tempForm.foodGuiges = JSON.stringify(sellMoneyMultiItemArr);
        } else {
          tempForm.foodGuiges = JSON.stringify([{
            sellFee: this.form.sellMoneySinglePrice,
            foodAttributeDetailId: this.form.sellMoneySingleUnit
          }])
        }
        //转移数据
        tempForm.storeId = sessionStorage.getItem('storeId');
        tempForm.id = this.form.id
        tempForm.name = this.form.name;
        tempForm.foodTypeId = this.form.foodTypeId;
        tempForm.photoId = this.photoId; //不在form里
        tempForm.areaId = this.form.printArea;
        tempForm.boxFee = this.form.boxFee;
        tempForm.inventory = this.form.inventory;
        tempForm.category = this.form.category;
        tempForm.onSale = this.form.onSale.join('-');
        tempForm.kouWeiIds = this.form.kouweis.join('-');
        tempForm.zuoFaIds = this.form.zuofas.join('-');
        //检查数据
        console.log(this.form)
        console.log(tempForm)
        editFood(tempForm).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          })
          this.editDialog = false
          this.foodInfoDialog = false
          this.$refs.page.refresh()
        }).catch(() => {
          this.loading = false
        })
      },
      /*
       * 刷新
       * */
      refresh() {
        this.$refs.page.refresh()
      },

      // =================管理菜型方法开始==============================
      findFoodType() {
        findFoodType().then(response => {
          this.foodTypeList = response.obj
        }).catch(() => {

        })
      },

      findStoreFoodAttribute() {
        findStoreFoodAttribute().then(response => {
          console.warn('属性')
          console.log(response.obj)
          this.zuofaOptions = response.obj.zuoFaItems
          this.kouweiOptions = response.obj.kouWeiItems
          this.guigeOptions = response.obj.guiGeItems
          this.chengzhongOptions = response.obj.chengZhongItems
          this.unitOptions = response.obj.unitItems
        }).catch(() => {

        })
      },
      openFoodTypeDialog() {
        this.findFoodType()
        this.foodTypeDialog = true
      },
      closeFoodTypeDialog() {
        this.show_dialog_handle = false
        this.foodTypeDialog = false
      },
      // 打开菜品类型添加框
      openFoodTypeAddDialog() {
        this.show_dialog_handle = true
        this.foodTypeName = ''
      },
      // 保存菜型类型，添加或者修改
      saveFoodType() {
        if (this.foodTypeId) {
          this.editFoodType()
        } else {
          this.addFoodType()
        }
      },
      // 打开菜品类型修改框
      openFoodTypeEditDialog(id, name) {
        this.show_dialog_handle = true
        this.foodTypeName = name
        this.foodTypeId = id
      },
      /**
       * 添加新的菜品类型
       */
      addFoodType() {
        addFoodType(this.foodTypeName).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodType()
          // 关闭内容输入框
          this.closeShowDialogHandle()
        }).catch(() => {

        })
      },


      /**
       * 修改菜品类型
       */
      editFoodType() {
        // 打开修改框并回显
        this.show_dialog_handle = true
        editFoodType(this.foodTypeId, this.foodTypeName).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodType()
          // 关闭内容输入框
          this.closeShowDialogHandle()
        }).catch(() => {
          this.closeShowDialogHandle()
        })
        this.foodTypeId = ''
      },
      /**
       * 删除菜品属性详情
       */
      deleteFoodType(id) {
        deleteFoodType(id).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodType()
        }).catch(() => {

        })
      },
      // =================管理菜型方法结束==============================

      //==================菜品属性方法开始==============================
      // 获取菜品属性列表
      findFoodAttribute() {
        findFoodAttribute(this.foodAttributeId).then(response => {
          this.foodAttributeTabList = response.obj.tabItem
          this.foodAttributeDetailList = response.obj.detail
          console.log(response.obj.detail)

        }).catch(() => {

        })
      },
      //打开菜品属性弹框
      openFoodAttributeDialog() {
        this.findFoodAttribute()
        this.foodAttributeDialog = true
      },
      // 菜品属性tab切换
      changeFoodAttributeTab(tab, event) {
        this.openFoodAttributeDialog()
      },
      // 打开添加做法
      openAddDialogHandle() {
        this.foodAttributeDetailName = ''
        this.show_dialog_handle = true
      },
      // 打开修改框
      openEditDialogHandle(id, name) {
        this.show_dialog_handle = true
        this.foodAttributeDetailName = name
        this.foodAttributeDetailId = id
      },
      closeShowDialogHandle() {
        this.show_dialog_handle = false
      },
      //关闭弹框
      closeFoodAttributeDialog() {
        this.show_dialog_handle = false
        this.foodAttributeDialog = false
      },
      /**
       * 保存菜单属性详情，新增或修改
       */
      saveFoodAttributeDetail() {
        if (this.foodAttributeDetailId) {
          this.editFoodAttribute()
        } else {
          this.addFoodAttribute()
        }
      },
      /**
       * 添加新的菜品属性详情
       */
      addFoodAttribute() {
        addFoodAttribute(this.foodAttributeId, this.foodAttributeDetailName).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodAttribute()
          // 关闭内容输入框
          this.closeShowDialogHandle()
        }).catch(() => {

        })
      },
      /**
       * 修改菜品属性详情
       */
      editFoodAttribute() {
        // 打开修改框并回显
        this.show_dialog_handle = true
        editFoodAttribute(this.foodAttributeDetailId, this.foodAttributeDetailName).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodAttribute()
          // 关闭内容输入框
          this.closeShowDialogHandle()
        }).catch(() => {
          this.closeShowDialogHandle()
        })
        this.foodAttributeDetailId = ''
      },
      /**
       * 删除菜品属性详情
       */
      deleteFoodAttribute(foodAttributeDetailId) {
        deleteFoodAttribute(foodAttributeDetailId).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodAttribute()
        }).catch(() => {

        })
      },

      //==============菜品属性方法结束===================


      //创建模态框 上传
      createLogoSuccess(response, file) {
        //保存图片ID
        this.photoId = response.obj
        console.log(response)
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.form.foodPhotoId = response.obj
        this.createdSrc = returnThumbnailUrl(response.obj)
      },
      //编辑模态框 上传
      editLogoSuccess(response, file) {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.edit.foodPhotoId = response.obj
        this.editSrc = returnThumbnailUrl(response.obj)
      },
      //图片上传失败
      handleLogoFailed() {
        this.$message({
          message: '图片上传失败',
          type: 'error'
        })
      },
      //对上传图片做限制
      beforeLogoUpload(file) {
        let isImage = file.type.substring(0, 5) === 'image'
        if (!isImage) {
          this.$message.error('只能上传图片')
          return false
        }
        return true
      },

      //xwy
      //取得单规格id
      getSellMoneySingle(event) {
        this.form.sellMoneySingleUnitId = event;
      },
      //取得多规格id
      getSellMoneyMulti(event) {
        this.form.sellMoneyMultiUnitId = event;
      },
      //规格保存
      saveSellModeUnit(index) {

        if (this.form.sellMoneyMultiUnitId == "") {
          this.$message.error('请选择规格');
          return
        }

        if (this.form.sellMoneyMultiPrice[index].price == '') {
          this.$message.error('请输入价格');
          return
        }


        this.form.sellMoneyMultiPrice[index].value = this.form.sellMoneyMultiUnitId;
        this.form.sellMoneyMultiPrice[index].save = true;
        this.sellModeSaveStatus = 1

        this.$message.success('保存成功');

      },
      //添加规格行
      addSellModeUnit() {
        if (this.sellModeSaveStatus === 0) {
          this.$message.error('请保存上一个规格');
          return false
        }
        this.form.sellMoneyMultiPrice.push({name: '', value: '', price: '', save: false});
        this.sellModeSaveStatus = 0;
      },
      //删除规格行
      deleteSellModeUnit(index) {
        if (confirm('删除这个规格吗？')) {
          this.form.sellMoneyMultiPrice.splice(index, 1);
          this.$message.success('删除成功')
        }

        if (this.form.sellMoneyMultiPrice.length === 0) {
          this.form.sellMoneyMultiPrice.push({name: '', value: '', price: '', save: false});
          this.sellModeSaveStatus = 0;
        }

      },
      //取得多规格id
      getchengzhongMultiId(event) {
        this.form.chengzhongMultiId = event;
      },

      //保存称量
      savechengzhongUnit(index) {
        console.log(index)
        if (this.form.chengzhongMulti[index].name == '') {
          this.$message.error('请选择称量单位');
          return
        }
        this.form.chengzhongMulti[index].save = true;
        this.form.chengzhongMulti[index].value = this.form.chengzhongMultiId;
        this.chengzhongSaveStatus = 1;//已经保存
        console.log(this.form.chengzhongMulti)
      },
      //添加称量行
      addchengzhongUnit() {
        if (this.chengzhongSaveStatus === 0) {
          this.$message.error('请保存上一个称量单位');
          return false
        }
        this.form.chengzhongMulti.push({name: '', value: '', save: false})
        this.chengzhongSaveStatus = 0;
      },
      //删除称量行
      deletechengzhongUnit(index) {
        if (confirm('删除这个称量吗？')) {
          this.form.chengzhongMulti.splice(index, 1);
          this.$message.error('删除成功')
        }

        if (this.form.chengzhongMulti.length === 0) {
          this.form.chengzhongMulti.push({name: '', value: '', save: false})
          this.chengzhongSaveStatus = 0;
        }
      },

      //修改菜品类别，隐藏做法 口味 称重
      changeCategory(e) {
        if (e == 1) {
          this.form.category = 1
        } else if (e == 2) {
          this.form.category = 2
        } else if (e == 3) {
          this.form.category = 3
        }
      },

      //菜信息模态框
      foodInfoDialogOpen(table) {
        this.foodInfoDialog = true
        this.NowTableData = table;
        this.NowTableDataGuige = table.foodGuiGeList
        let onSale = table.onSale.split("-");
        console.log(onSale)

        let onSaleArr = onSale.filter(function (s) {
          return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });

        console.log(onSaleArr)

        this.NowTableOnSaleIn = onSaleArr[0] == '1' ? true : false;
        this.NowTableOnSaleOut = onSaleArr[1] == '2' ? true : false;
        console.log(table)
      },
      foodInfoDialogClose() {
        this.foodInfoDialog = false
      }
    }
  }
</script>

<style scoped>
  @import "../css/food.css";

</style>
